<template>
	<view class="main-wrap">
		<!-- <cu-custom bgColor="bg-gradual-blue">
			<block slot="content">人才库</block>
			<block slot="right">
				<text class='btn-item' @tap="showModal" data-target="bottomModal">添加</text>
				<text class='btn-item'>筛选</text>
			</block>
		</cu-custom> -->
		<view class="tabbox">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="flex-sub cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in items" :key="index"
					 @tap="tabSelect" :data-id="index">
						<view class="tabnum">{{item.num}}</view>
						<view class="tabtext">{{item.text}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="content">
			<view class=" talent-list-wrap">
				<block v-for="(item,index) in dataSource" :key="index">
					<TalentItem :item="item" :index="index" />
				</block>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white flex rce">
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl action-content">
					<view class="action-title">—— 请选择添加人才的方式 ——</view>
					<view class="action-content-detail grid col-3">
						<view @tap="onPressToScan('./talent_add_scan')" class="flex flex-1 action-con-item ccc">
							<image class="action-item-icon" src="../../static/icon/icon_btn_scan.png" mode="widthFix" />
							<text class="action-item-title">扫描身份证</text>
						</view>
						<view @tap="onPressToNavigateAdd('/pages/talent_pool/talent_add_upload')" class="flex flex-1 action-con-item ccc">
							<image class="action-item-icon" src="../../static/icon/icon_btn_camera.png" mode="widthFix" />
							<text class="action-item-title">上传身份证</text>
						</view>
						<view @tap="onPressToNavigateAdd('/pages/publish/talent_add_manual')" class="flex flex-1 action-con-item ccc">
							<image class="action-item-icon" src="../../static/icon/icon_btn_edit.png" mode="widthFix" />
							<text class="action-item-title">手动录入</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import TalentItem from '../../components/item/talent-item.vue';

	export default {
		components: {
			TalentItem,
		},
		data() {
			return {
				token: "",
				items: [{
					num: 4000,
					text: '全部人才'
				}, {
					num: 200,
					text: '未入职'
				}, {
					num: 400,
					text: '待入职'
				}, {
					num: 1200,
					text: '在职'
				}, {
					num: 600,
					text: '离职'
				}, ],
				// 导航栏数据
				TabCur: 0,
				scrollLeft: 0,
				page: 1,
				limit: 10,
				on_job: 1,
				modalName: '', // 'bottomModal',
				dataSource: [] // 传给列表得数据
			}
		},
		methods: {
			// 导航栏方法
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				// console.log(this.TabCur)
				// console.log(this.scrollLeft)
				// console.log(e)
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			onPressToNavigateAdd(url) {
				uni.navigateTo({
					url
				});
			},
			onPressToScan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
					}
				});
			},
			// 后台请求列表数据 
			async getList() {
				// 取token
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
				// 发请求
				let url = this.ServicesApi.getList;
				let data = {
					limit: 10,
					page: this.page,
					on_job: this.on_job, //岗位类型名称
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.dataSource = result.data.data;
				}

				// uni.request({
				//     url: this.ServicesApi.getList, 
				// 	method:'POST',
				// 	header: {

				// 		"content-type":"application/x-www-form-urlencoded"
				// 	},
				//     data: {
				// 		token:this.token,
				// 		page:"1",
				// 		limit:"10",
				// 		on_job:"1",
				//     },
				//     success: (res) => {
				//         // console.log(res.data.data.data);
				// 		this.dataSource = res.data.data.data

				//     }
				// });
			}
		},
		mounted() {
			this.getList()
		}
	}
</script>
<style scoped>
	.tabnum {
		margin-top: 40upx;
		font-size: 30upx;
	}

	.tabtext {
		margin-top: 40upx;
		font-size: 28upx;
	}

	.nav {
		padding: 0 20upx;
	}

	.tabbox {
		border-bottom: 1upx solid #DBDBDB;
	}

	.cu-item {
		height: 120upx;
		line-height: 0upx;
	}

	.content {
		background-color: #F3F3F3;
	}

	.btn-item {
		margin-left: 10px;
	}

	.navItemBadge {
		font-size: 12px;
		color: #FFFFFF;
		margin-top: 15upx;
		margin-left: -5px;
		height: 20upx;
		line-height: 20upx;
		padding: 5upx;
		position: absolute;
		background: #F00;
	}

	.action-content {
		padding-top: 0;
		background-color: #FFFFFF;
	}

	.action-content .action-title {
		color: #666666;
		font-size: 30upx;
	}

	.action-content .action-content-detail {
		margin: 60upx 0;
	}

	.action-content .action-con-item {}

	.action-content .action-con-item .action-item-icon {
		width: 80upx;
		height: 80upx;
		margin-bottom: 20upx;
	}
</style>
